<template>
    <div class="body">
        <div class="titler">
            <img src="../../assets/头部.png" alt="">
        </div>
        <div class="logo">
            <img src="../../assets/注册.png" alt="">
        </div>
        <div class="from">
            <div class="from_group">
                <input type="text" placeholder="请输入账号"
                v-model="name"
                >
                <span class="check-message" ref="span1">请输入4-6位的用户名</span>
            </div>
            <div class="from_group">
                <input type="text" placeholder="请输入手机号码" v-model="phone">
                <span class="check-message" ref="span2">请输入正确的电话号码</span>
            </div>
            <div class="from_group">
                <input type="text" placeholder="请输入密码" v-model="password">
                <span class="check-message" ref="span3">请输入正确的密码</span>
            </div>
        </div>
        <div class="anniu">
            <button @click="register">注册</button>
        </div>
       
        <div class="footer"> <router-link to="/login">已有账号去登陆</router-link></div>
    </div>


</template>

<script setup>
import {ref} from "vue"
import {post} from "../../login/request"
import {useRouter} from  "vue-router";
const router = useRouter();
let name = ref('')
let phone = ref('')
let password = ref('')
let password2 = ref('')
let span1= ref('')
let span2= ref('')
let span3= ref('')


//校验用户名合法性
function checkUname () {
    let uNameReg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/g
    if (uNameReg.test(name.value)) {
        span1.value.style.display="none"
    } else {
        span1.value.style.display="block"
    }
}
//校验手机号码的合法性
function checkPhone () {
    let uNameReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/g
    if (uNameReg.test(phone.value)) {
        span2.value.style.display="none"
    } else {
        span2.value.style.display="block"
    }
}
//校验密码的合法性
function checkCard () {
    let uNameReg = /^(0|[1-9][0-9]*)$/g
    if (uNameReg.test(password.value)) {
        span3.value.style.display="none"
    } else {
        span3.value.style.display="block"
    }
}


let register=async()=>{

    checkUname(name)
    checkPhone (phone)
    checkCard (password)

    let data={
        name:name.value,
        phone:phone.value,
        password:password.value,
        // password2:password2.value.value
    };
    console.log(name.value);
    let result =await post('/register',data)
    console.log(result);
    router.push("./login")
    
   
    

}

</script>

<style lang="scss" scoped>

.body{
    overflow:hidden;
}
.titler{
    width: 100%;
    height: 0.2rem;
}
.logo{
    margin-top: 0.5rem;
    margin-left: 1.55rem;
    width: 0.66rem;
    height: 0.66rem;
}
.from {
    margin-top: 0.1rem;
    margin-left: 0.3rem;
    width: 3.25rem;
    height: 2.8rem;
}
.from_group{
    width: 3.25rem;
    height: 0.8rem;

    input{
        padding-left: 0.2rem;
        width: 3.17rem;
        height: 0.5rem;
        background:none;  
	    outline:none;  
	    border:none;
        background-color: #F9F9F9;
    }

    .check-message{
        width: 2rem;
        height: 0.2rem;
        font-size: 0.14rem;
        color:red;
        display: none;
    }

}
.from_group:nth-child(2){
    margin-top: 0.1rem;
}
.from_group:nth-child(3){
    margin-top: 0.1rem;
}


.anniu{
    margin-top: 0.4rem;
    margin-left: 0.3rem;
    width: 3.25rem;
    height: 0.6rem;

    button{
        width: 3.25rem;
        height: 0.6rem;
        background-color: #0091FF;
        color:#FFFFFF;
        border:none;
    }
}
.footer{
    margin-top: 0.16rem;
    margin-left: 1.5rem;
    width: 0.98rem;
    height: 0.2rem;
    color: rgba(0,0,0,0.50);
}
</style>